<script setup>
import { ref, onMounted } from 'vue'
import service from '@/utils/request'

const greenhouseInfo = ref({
  id: null,
  name: '',
  area: 0,
  address: '',
  createTime: '',
  deviceCount: 0,
  devices: []
})

const loading = ref(true)
const error = ref(null)

// 获取大棚信息
const fetchGreenhouseInfo = async () => {
  loading.value = true
  error.value = null
  try {
    const greenhouseNumber = '300822040454'

    // 分开请求，方便调试
    const greenhouseRes = await service.get(`/greenhouse/number/${greenhouseNumber}`)
    console.log('大棚信息响应:', greenhouseRes)

    // 先更新大棚基本信息
    if (greenhouseRes) {
      greenhouseInfo.value = {
        id: greenhouseRes.id,
        name: greenhouseRes.name,
        area: `${greenhouseRes.area}平方米`,
        address: greenhouseRes.address,
        createTime: greenhouseRes.createTime,
        deviceCount: 0,
        devices: []
      }
    }

    // 再获取设备信息
    try {
      const devicesRes = await service.get(`/api/devices/greenhouse/${greenhouseNumber}`)
      console.log('设备信息响应:', devicesRes)

      // 检查返回的数据结构
      if (devicesRes && devicesRes.data && Array.isArray(devicesRes.data)) {
        console.log('设备数据:', devicesRes.data)
        greenhouseInfo.value.deviceCount = devicesRes.data.length
        console.log('设备数量:', greenhouseInfo.value.deviceCount)
        greenhouseInfo.value.devices = devicesRes.data.map(device => ({
          id: device.id,
          name: device.name,
          deviceNumber: device.deviceNumber,
          category: device.category
        }))
        console.log('处理后的设备数据:', greenhouseInfo.value.devices)
      } else {
        console.warn('设备数据格式不正确:', devicesRes)
      }
    } catch (deviceError) {
      console.error('获取设备信息失败:', deviceError)
    }

  } catch (error) {
    console.error('获取大棚信息失败:', error)
    error.value = '获取大棚信息失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchGreenhouseInfo()
})
</script>

<template>
  <div class="panel greenhouse-info">
    <div class="panel-header">
      <span>大棚基本信息</span>
      <div class="header-actions">
        <el-button
            type="primary"
            size="small"
            :loading="loading"
            @click="fetchGreenhouseInfo"
        >
          刷新
        </el-button>
      </div>
    </div>

    <div class="info-content" v-loading="loading">
      <template v-if="error">
        <div class="error-message">
          {{ error }}
        </div>
      </template>
      <template v-else>
        <div class="info-row">
          <div class="info-item">
            <span class="label">大棚编号：</span>
            <span class="value">300822040454</span>
          </div>
          <div class="info-item">
            <span class="label">大棚名称：</span>
            <span class="value">{{ greenhouseInfo.name || '暂无数据' }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="label">建筑面积：</span>
            <span class="value">{{ greenhouseInfo.area }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ greenhouseInfo.createTime }}</span>
          </div>
        </div>

        <div class="info-row">
          <div class="info-item">
            <span class="label">设备数量：</span>
            <span class="value highlight">{{ greenhouseInfo.deviceCount }}台</span>
          </div>
          <div class="info-item">
            <span class="label">所在地址：</span>
            <span class="value">{{ greenhouseInfo.address || '暂无数据' }}</span>
          </div>
        </div>

        <div class="info-row devices-list" v-if="greenhouseInfo.devices.length > 0">
          <div class="info-item full-width">
            <span class="label">设备列表：</span>
            <div class="devices-container">
              <el-tag
                  v-for="device in greenhouseInfo.devices"
                  :key="device.id"
                  class="device-tag"
                  type="info"
                  effect="plain"
              >
                {{ device.name }}
                <span class="device-number">({{ device.deviceNumber }})</span>
              </el-tag>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.greenhouse-info {
  margin-bottom: 20px;
}

.info-content {
  padding: 15px;
  min-height: 200px;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.info-item.full-width {
  flex: 2;
}

.label {
  color: #909399;
  margin-right: 8px;
  font-size: 14px;
  white-space: nowrap;
}

.value {
  color: #fff;
  font-size: 14px;
  flex: 1;
  word-break: break-all;
}

.value.highlight {
  color: #67e0e3;
  font-weight: bold;
  font-size: 16px;
}

.error-message {
  color: #f56c6c;
  text-align: center;
  padding: 20px;
}

:deep(.el-loading-mask) {
  background-color: rgba(0, 0, 0, 0.5);
}

.devices-list {
  margin-top: 20px;
  border-top: 1px solid rgba(0,183,255,0.2);
  padding-top: 20px;
}

.devices-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.device-tag {
  display: flex;
  align-items: center;
  gap: 5px;
}

:deep(.el-tag) {
  background-color: rgba(0,47,167,0.2);
  border-color: rgba(0,183,255,0.2);
  color: #fff;
}

.device-number {
  color: #909399;
  font-size: 12px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}
</style> 